<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-parent></my-parent>
  </div>
</body>
<template id = "parent">
  <div>
    <h1>父组件</h1>
    <!-- 1.父组件在调用子组件的地方，添加自定义属性,属性的值就是需要传递给子组件的值
      如果自定义的属性值是变量，boolean类型，number类型，对象，数组，null或者undefined
      需要使用绑定属性
     -->
    <my-child test="哈哈" :mymsg = "msg" :flag="true" :num="100" :obj="{a: 1000}" :arr="[1, 2, 3]"></my-child>
    <my-child ></my-child>
  </div>
</template>
<template id = "child">
  <div>
    <!-- 3.可以直接在子组件中通过之前自定义的属性名访问 -->
    <h2>子组件</h2>
    {{ test }} - {{ mymsg }} - {{ flag }} - {{ num }} - {{ obj }} - {{arr}}
  </div>
</template>
<script src="lib/vue.js"></script>
<script>
  // 2.在定义子组件的地方，添加props选项
  // 2.1 props选项可以写为一个数组，数组的元素就是之前自定义的属性名
  // 2.2 props选项可以写为一个对象，对象的key值为自定义的属性名，value值为数据类型
  // 2.3 props选项可以写为一个对象，对象的key值为自定义的属性名，value值为一个对象
  //      对象中的key 的type 属性表示数据类型，default 表示默认值(如果数据类型为对象和数组，默认值defualt 为一个函数返回其对象或者数组)
  //      如果该属性必须传的值，就可以通过required属性设定
  //      如果需要进一步验证属性的值，可以添加 validator 函数 （少数） 
  const Child = {
    // props: ['test', 'mymsg', 'flag', 'num', 'obj', 'arr'],
    // props: {
    //   test: String,
    //   mymsg: String,
    //   flag: Boolean,
    //   num: Number,
    //   obj: Object,
    //   arr: Array
    // },
    props: {
      test: {
        type: String,
        default: '嘻嘻'
      },
      mymsg: {
        type: String,
        default: 'aaaaaaa'
      },
      flag: {
        type: Boolean,
        required: true,
        default: false
      },
      num: {
        type: Number,
        default: 0
      },
      obj: {
        type: Object,
        default () {
          return { aaaaaa: 1000000 }
        }
      },
      arr: {
        type: Array,
        default () {
          return ['aaa', 'bbb', 'ccc']
        }
      }
    },
    template: '#child'
  }
  const Parent = {
    template: '#parent',
    data () {
      return {
        msg: '111'
      }
    },
    components: {
      'my-child': Child
    }
  }
  new Vue({
    el: '#app',
    components: {
      'my-parent': Parent
    }
  })
</script>
</html>